import React, {Component} from 'react';
import {Button, Card, Form, Input, Row, Table} from 'antd';
import ajax from '../../util/AjaxUtil';
import qs from 'qs';

class DataGrid extends Component {

    constructor(props) {
        super(props);

        if(props.onRef!=null && Object.prototype.toString.call(props.onRef) === '[object Function]'){
            props.onRef(this);
        }

        this.pageChangeHandle = this.pageChangeHandle.bind(this);
        this.pageSizeChange = this.pageSizeChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.clearForm = this.clearForm.bind(this);

        let pagination = null;
        let propPageChange = null;
        let propPageSizeChange = null;
        if (props.table != null && props.table.pagination != null) {
            pagination = props.table.pagination;
            propPageChange = pagination.onChange;
            propPageSizeChange = pagination.onShowSizeChange;
            pagination.onChange = this.pageChangeHandle;
            pagination.onShowSizeChange = this.pageSizeChange;
        } else {
            pagination = {
                current: 1,
                pageSize: 10,
                total: 0,
                onChange: this.pageChangeHandle,
                showSizeChanger: true,
                onShowSizeChange: this.pageSizeChange
            }
        }

        this.state = {
            tableData: [],
            pagination: pagination,
            propPageChange: propPageChange,
            tableLoading: false,
            propPageSizeChange: propPageSizeChange
        };

    }

    render() {

        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;

        return (
            <div>
                <Card title="查询条件"
                      {...this.props.paramCard}
                >
                    <Form layout="inline" onSubmit={this.handleSubmit}>

                        {
                            this.props.params == null ? null : this.props.params.map(function (param) {
                                return (<Form.Item label={param.label} key={param.name}>
                                    {getFieldDecorator(param.name, {rules: param.rule})(
                                        param.render !== null ? param.render : <Input placeholder={param.label}/>
                                    )}
                                </Form.Item>);
                            })
                        }

                        <Form.Item key={'submitBtn'}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                        <Form.Item key={"restBtn"}>
                            <Button onClick={this.clearForm}>重置</Button>
                        </Form.Item>
                    </Form>
                </Card>

                <Card title='数据列表' style={{marginTop: 10}}
                      {...this.props.tableCard}
                >
                    <Table {...this.props.table}
                           dataSource={this.state.tableData}
                           pagination={this.state.pagination}
                           loading={this.state.tableLoading}
                    />
                </Card>
            </div>
        );
    }

    componentDidMount() {
        this.handleSubmit(null);
    }

    handleSubmit(e) {
        if (e != null) {
            e.preventDefault()
        }

        this.setState({
            tableLoading: true
        });

        let param = this.props.form.getFieldsValue();
        if (this.props.queryParam != null) {
            param = Object.assign(param, this.props.queryParam);
        }
        param.current = this.state.pagination.current;
        param.size = this.state.pagination.pageSize;

        ajax.post(this.props.url, qs.stringify(param)).then(response => {
            this.setState({
                pagination: {
                    current: response.data.current,
                    pageSize: response.data.size,
                    total: response.data.total
                },
                tableData: response.data.records,
                tableLoading: false
            });
        }).catch(err => {
            this.setState({
                tableLoading: false
            });
        });
    }

    pageChangeHandle(page, pageSize) {
        this.setState({
            pagination: {
                current: page,
                pageSize: pageSize
            }
        }, () => {
            this.handleSubmit(null);
            if (this.state.propPageChange != null) {
                this.state.propPageChange(page, pageSize);
            }
        });
    }

    pageSizeChange(current, size) {
        this.setState({
            pagination: {
                current: current,
                pageSize: size
            }
        }, () => {
            this.handleSubmit(null);
            if (this.state.propPageSizeChange != null) {
                this.state.propPageSizeChange(current, size);
            }
        });
    }

    clearForm() {
        this.props.form.resetFields();
    }

    reload(){
        this.handleSubmit(null);
    }
}

export default Form.create()(DataGrid);